
<template>
  <div>
    <el-card shadow="never">
      <div slot="header">
        <div style="padding-left: 80%">
          <el-popconfirm
              confirm-button-text='删除'
              cancel-button-text='取消'
              icon="el-icon-info"
              icon-color="red"
              @onConfirm="delete_emp(employInfo.uid)"
              title="您确定删除该就业信息吗？"
          >
            <el-button slot="reference" type="danger" icon="el-icon-delete-solid" v-if="employInfo.uid != null">删除就业信息</el-button>
          </el-popconfirm>
          <el-button type="success" icon="el-icon-circle-plus"  v-if="employInfo.uid == null" @click="add('dialog')">添加就业信息</el-button>
        </div>
      </div>
      <div v-if="employInfo.uid != null">
        <div style="width: 30%;float: left">
        <h3>
          <i class="fa fa-user" aria-hidden="true"></i>基本信息<el-link icon="el-icon-edit" type="success" style="margin-left: 80px" @click="add('edinfo')">修改</el-link></h3>
        <hr/>
        <ul>
          <li>
            <label>就职单位：</label>
            <span>{{employInfo.gc}}</span>
          </li>
          <li>
            <label>就职岗位：</label>
            <span>{{employInfo.gw}}</span>
          </li>
          <li>
            <label>薪资：</label>
            <span>{{employInfo.salary}}</span>
          </li>
          <li>
            <label>岗位属性：</label>
            <span>{{employInfo.type}}</span>
          </li>
        </ul>
        </div>
        <div style="width: 65%;float: right;height: 75%" >
          <h3>
            <i class="fa fa-user" aria-hidden="true"></i>Office照片<el-link icon="el-icon-edit" type="success" style="margin-left: 80px" @click="add('imginfo')">修改</el-link></h3>
          <hr/>
          <el-image :src="qz+employInfo.emimg" style="width: 400px; height: 400px"
                    :preview-src-list="srcList">
          >
            <div slot="placeholder" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </el-image>
        </div>
      </div>
    </el-card>
    <el-dialog title="添加信息就业" :visible.sync="emp_state" style="width: 900px;padding-left: 26%">
      <el-form ref="form" :model="emp_from" label-width="80px">
        <el-form-item label="就职单位">
          <el-input
              style="width: 200px"
              v-model="emp_from.name"
              placeholder="请输入就职单位"
          ></el-input>
        </el-form-item>
        <el-form-item label="就职岗位">
          <el-input
              style="width: 200px"
              v-model="emp_from.gw"
              placeholder="请输入就职岗位"
          ></el-input>
        </el-form-item>
        <el-form-item label="薪资">
          <el-input
              style="width: 200px"
              v-model="emp_from.salary"
              placeholder="请输入薪资"
          ></el-input>
        </el-form-item>
        <el-form-item label="岗位属性">
          <el-select v-model="value" placeholder="请选择岗位属性">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <label>Office照片</label>
        <el-upload
            class="upload-demo"
            ref="upload"
            :auto-upload="false"
            :http-request="upLoadFile"
            :multiple="multiple"
            :limit="Number(1)"
            drag
            action="">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>

        <div align="center">
          <el-button
              type="success"
              size="small"
              @click="add('addemp')"
              v-show="emp_input_state"
          >确认</el-button
          >
        </div>
      </el-form>
    </el-dialog>
    <el-dialog title="修改信息就业" :visible.sync="edp_state" style="width: 900px;padding-left: 26%">
      <el-form ref="form" :model="emp_from" label-width="80px">
        <el-form-item label="就职单位">
          <el-input
              style="width: 200px"
              v-model="emp_from.gc"
              placeholder="请输入就职单位"
          ></el-input>
        </el-form-item>
        <el-form-item label="就职岗位">
          <el-input
              style="width: 200px"
              v-model="emp_from.gw"
              placeholder="请输入就职岗位"
          ></el-input>
        </el-form-item>
        <el-form-item label="薪资">
          <el-input
              style="width: 200px"
              v-model="emp_from.salary"
              placeholder="请输入薪资"
          ></el-input>
        </el-form-item>
        <el-form-item label="岗位属性">
          <el-select v-model="value" placeholder="请选择岗位属性">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <div align="center">
          <el-button
              type="success"
              size="small"
              @click="add('edpinfo')"
              v-show="edp_input_state"
          >确认</el-button>
        </div>
      </el-form>
    </el-dialog>
    <el-dialog title="修改Office图片" :visible.sync="img_state" style="width: 900px;padding-left: 26%">
      <el-form ref="form" :model="emp_from" label-width="80px">
        <el-upload
            class="upload-demo"
            ref="upload"
            :auto-upload="false"
            :http-request="upLoadFile"
            :multiple="multiple"
            :limit="Number(1)"
            drag
            action=""
            >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过3MB</div>
        </el-upload>
        <div align="center">
          <el-button
              type="success"
              size="small"
              @click="add('ruleForm')"
              v-show="img_input_state"
          >确认</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>

</template>

<script>
export default {
  name: "EmployMent",
  data() {
    return {
      multiple:true,
      formData:"",
      employInfo:{},
      emp_state:false,
      emp_input_state:false,
      edp_state:false,
      edp_input_state:false,
      img_state:false,
      img_input_state:false,
      qz:this.$axios.defaults.baseURL,
      srcList: [
      ],
      emp_from:{
        gc:"",
        gw:"",
        types:"",
        salary:""
      },
      options: [{
        value: 'IT互联网',
        label: 'IT互联网'
      }, {
        value: '金融',
        label: '金融'
      }, {
        value: '房地产',
        label: '房地产'
      }, {
        value: '教育培训',
        label: '教育培训'
      }, {
        value: '娱乐传媒',
        label: '娱乐传媒'
      }
        , {
          value: '医疗健康',
          label: '医疗健康'
        }, {
          value: '法律咨询',
          label: '法律咨询'
        }, {
          value: '供应链',
          label: '供应链'
        }, {
          value: '采购贸易',
          label: '采购贸易'
        }
      ],
      value: '',
    }
  },

  methods: {
    upLoadFile(file){
      this.formData.append("files",file.file)
    },
    selectEmployMent(){
      this.$axios({
        url: this.$axios.defaults.baseURL+"8/student/myemployment",
        method: "post",
        params:{
          uid:sessionStorage.getItem("studentuid")
        }
      }).then(res => {
        this.employInfo = res.data;
        this.srcList.push(this.$axios.defaults.baseURL+res.data.emimg);
        this.emp_from.salary = res.data.salary;
        this.emp_from.gc = res.data.gc;
        this.emp_from.gw = res.data.gw;
        this.value = res.data.type;
      })
    },
    delete_emp(_uid) {
      this.$axios({
        url: this.$axios.defaults.baseURL+"/student/delmyemp",
        method: "get",
        params: {
          uid:_uid,
        }
      }).then(res => {
        if(res.data){
          this.$message.success(res.data.msg);
          this.selectEmployMent();
        }else {
          this.$message.error(res.data.msg);
        }
      })
    },
    add(key) {
      switch (key) {
        case "dialog":
          this.emp_state = true;
          this.emp_input_state = true;
          break;
        case "addemp":
          this.formData = new FormData();
          this.formData.append("gc",this.emp_from.gc);
          this.formData.append("gw",this.emp_from.gw);
          this.formData.append("salary",this.emp_from.salary);
          this.formData.append("type",this.value);
          this.formData.append("uid",sessionStorage.getItem("studentuid"));
          this.$refs.upload.submit();
          this.$axios.post(this.$axios.defaults.baseURL+"/student/updatemyempinfoimg",this.formData,{
            headers: {'Content-Type': 'multipart/form-data'
            }}).then(res => {
            if (res.status) {
              this.$message.success(res.data.msg);
            } else {
              this.$message.error(res.data.msg);
            }
            setTimeout(() => {
              this.emp_state = false;
              this.emp_input_state = false;
              if(res.status){
                this.selectEmployMent();
              }
            }, 1500);
          })
          break;
        case "edinfo":
          this.edp_state = true;
          this.edp_input_state = true;
          break;
        case "edpinfo":
          this.$axios({
            url: this.$axios.defaults.baseURL+"/student/updatemyemp",
            method: "post",
            params: {
              gc:this.emp_from.gc,
              gw:this.emp_from.gw,
              salary:this.emp_from.salary,
              type:this.value,
              uid:sessionStorage.getItem("studentuid")
            }
          }).then(res => {
            if (res.status) {
              this.$message.success(res.data.msg);
            } else {
              this.$message.error(res.data.msg);
            }
            setTimeout(() => {
              this.edp_state = false;
              this.edp_input_state = false;
              this.selectEmployMent();
            }, 1500);
          })
          break;
        case "imginfo":
          this.img_state = true;
          this.img_input_state = true;
          break;
        case "ruleForm":
          this.formData = new FormData();
          this.formData.append("uid",sessionStorage.getItem("studentuid"));
          this.$refs.upload.submit();
          this.$axios.post(this.$axios.defaults.baseURL+"/student/updatemyempimg",this.formData,{
            headers: {'Content-Type': 'multipart/form-data'
            }}).then(res => {
            if (res.status) {
              this.$message.success(res.data.msg);
            } else {
              this.$message.error(res.data.msg);
            }
            setTimeout(() => {
              this.img_state = false;
              this.img_input_state = false;
              if(res.status){
                this.selectEmployMent();
              }
            }, 1500);
          })
          break;
        }
      },
  },
  mounted() {
    this.selectEmployMent();
    console.log(this.employInfo)

  }
};
</script>
<style scoped>
li{
  margin-top: 8px;
  list-style: none;
}
</style>